@use "../../../../tokens";

.limitationsApplyContainer {
  display: flex;
  padding: tokens.$layout-md tokens.$spacing-sm;

  .limitationsApplyWrapper {
    display: flex;
    flex-direction: column;
    gap: tokens.$layout-md;
    align-items: center;
    margin: 0 auto;

    @media screen and (min-width: tokens.$screen-md) {
      flex-direction: row;
    }

    .limitationsApplyDescription {
      display: flex;
      flex-direction: column;
      gap: tokens.$spacing-md;

      h1 {
        font: tokens.$text-title-sm;
        font-family: var(--font-inter);
      }

      aside {
        width: fit-content;
        background-color: tokens.$color-purple-10;
        border-radius: tokens.$border-radius-lg;
        padding: tokens.$spacing-sm tokens.$spacing-md;
      }
    }
  }
}
